<template>
  <div>
    <el-dialog
      title="预定车辆"
      class="gl_dialog_TitleLine"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :before-close="close"
      :show-close="false"
      width="630px"
    >
      <div class="dialog_form">
        <el-form ref="form" class="gl_form_mini" :model="updateForm" :rules="form_rules" label-position="top">
          <el-form-item prop="receptionName" label="预定人姓名">
            <el-input v-model="updateForm.receptionName" style="width: 307px" clearable placeholder="请输入预定人姓名" />
          </el-form-item>
          <el-form-item prop="receptionPhoneNumber" label="预定人电话号码">
            <el-input v-model="updateForm.receptionPhoneNumber" style="width: 307px" clearable placeholder="请输入预定人电话号码" />
          </el-form-item>
          <el-form-item prop="goTo" label="接送选择">
            <el-checkbox-group v-model="updateForm.goTo" @change="handlecheckbox">
              <el-checkbox :disabled="!car.isPicksUp" label="pickUp">接车</el-checkbox>
              <el-checkbox :disabled="!car.isSends" label="deliver">送车</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-row v-if="isGo" :gutter="17">
            <el-col :span="12">
              <el-form-item prop="pickUpCarTime" label="接车时间">
                <el-date-picker
                  v-model="updateForm.pickUpCarTime"
                  type="datetime"
                  size="mini"
                  style="width: 268px;"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :picker-options="pickerOptions"
                  placeholder="选择接车时间"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="pickUpCarNumber" label="接车车辆数量">
                <el-input v-model="updateForm.pickUpCarNumber" size="small" clearable placeholder="请输入接车车辆数量" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="isTo" :gutter="17">
            <el-col :span="12">
              <el-form-item prop="deliverCarTime" label="送车时间">
                <el-date-picker
                  v-model="updateForm.deliverCarTime"
                  type="datetime"
                  size="mini"
                  style="width: 268px;"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :picker-options="pickerOptions"
                  placeholder="选择送车时间"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="deliverCarNumber" label="送车车辆数量">
                <el-input v-model="updateForm.deliverCarNumber" size="small" clearable placeholder="请输入送车车辆数量" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item prop="trainNumber" label="车次">
            <el-input v-model="updateForm.trainNumber" size="small" style="width: 552px" placeholder="请输入车次" />
          </el-form-item>
          <el-form-item prop="remark" label="备注">
            <el-input v-model="updateForm.remark" type="textarea" style="width: 553px" placeholder="请输入备注" />
          </el-form-item>
        </el-form>
      </div>
      <el-row type="flex" justify="center">
        <el-col align="center">
          <el-button size="mini" style="border-radius: 8px;" @click="close()">取消</el-button>
          <el-button type="primary" :loading="loading" style="border-radius: 8px;" size="mini" @click="submit('form')">确定</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import validator from '@/lib/validate/index.js';
import { FormatDate } from '@/lib';
import {
  api_POST_EventsManagementReceptionEntryReceptionEntry, // 预定
  api_PUT_EventsManagementReceptionEntryReceptionEntryLogisticEntryId // 修改
} from '@/extend/api/gameswaggerApi/app';
import {
  SiSTKWEventsManagementReceptionEntryInput
  // SiSTKWEventsManagementUpdateReceptionEntryInput
} from '@/lib/form/game/swaggerForm';
import { CopyData } from '@/lib';
export default {
  name: 'Reception',
  data() {
    return {
      dialogVisible: false,
      loading: false,
      createForm: new SiSTKWEventsManagementReceptionEntryInput(),
      updateForm: {
        receptionName: '',
        receptionPhoneNumber: '',
        trainNumber: '',
        pickUpCarTime: '',
        pickUpCarNumber: 0,
        deliverCarTime: '',
        deliverCarNumber: 0,
        remark: '',
        goTo: []
      },
      isGo: false,
      isTo: false,
      car: {}, // 预订的车辆数据
      code: '', // 预定 or 编辑
      entryId: '', // 预定时为后勤报名总表Id, 编辑为row.id
      pickerOptions: { // 时间范围限制
        disabledDate: time => {
          var sDate = '';
          var nowDay = new Date();
          nowDay.setTime(nowDay.getTime() - 24 * 60 * 60 * 1000);
          var startDate = this.time.startDateTime.split('T')[0];
          var startDay = new Date(startDate);
          if (nowDay > startDay) {
            sDate = nowDay;
          } else {
            var staDate = startDate.split('-');
            sDate = new Date(staDate[0], staDate[1] - 1, staDate[2]);
          }
          var endDate = this.time.endDateTime.split('T')[0];
          var enDate = endDate.split('-');
          var eDate = new Date(enDate[0], enDate[1] - 1, enDate[2]);
          return time.getTime() < sDate || time.getTime() > eDate;
        },
        selectableRange: '' // 车辆运营时间限制
      },
      form_rules: {
        receptionName: [validator.required('预定人姓名不能为空')],
        receptionPhoneNumber: [
          validator.required('预定人电话号码不能为空'),
          {
            validator(rule, value, callback) {
              callback(validator.checkPhone(value, '电话号码格式错误'));
            },
            trigger: 'blur'
          }
        ],
        goTo: [
          { type: 'array', required: true, message: '接送选择不能为空', trigger: 'change' }
        ],
        pickUpCarTime: [validator.required('接车时间不能为空')],
        pickUpCarNumber: [
          validator.required('接车车辆数量不能为空'),
          {
            validator(rule, value, callback) {
              callback(validator.checkPositiveNumber(value, '接车车辆数量只能是正整数'));
            },
            trigger: 'blur'
          }
        ],
        deliverCarTime: [validator.required('送车时间不能为空')],
        deliverCarNumber: [
          validator.required('送车车辆数量不能为空'),
          {
            validator(rule, value, callback) {
              callback(validator.checkPositiveNumber(value, '送车车辆数量只能是正整数'));
            },
            trigger: 'blur'
          }
        ]
      }
    };
  },
  methods: {
    open(car, code, id, time) {
      if (car.runningStartHour && car.runningEndHour) {
        const runningStartHour = car.runningStartHour < 10 ? '0' + car.runningStartHour : car.runningStartHour;
        const runningStartMinute = car.runningStartMinute < 10 ? '0' + car.runningStartMinute : car.runningStartMinute;
        const runningStart = runningStartHour + ':' + runningStartMinute + ':00';
        const runningEndHour = car.runningEndHour < 10 ? '0' + car.runningEndHour : car.runningEndHour;
        const runningEndMinute = car.runningEndMinute < 10 ? '0' + car.runningEndMinute : car.runningEndMinute;
        const runningEnd = runningEndHour + ':' + runningEndMinute + ':00';
        this.pickerOptions.selectableRange = runningStart + ' - ' + runningEnd;
      }
      this.dialogVisible = true;
      this.car = car;
      this.code = code;
      this.time = time;
      if (code === 'order') {
        this.entryId = id;
        this.updateForm.pickUpCarNumber = this.updateForm.pickUpCarNumber || null;
        this.updateForm.deliverCarNumber = this.updateForm.deliverCarNumber || null;
      }
      if (code === 'edit') {
        this.entryId = id;
        CopyData(this.car, this.updateForm);
        this.updateForm.pickUpCarNumber = this.updateForm.pickUpCarNumber || null;
        this.updateForm.deliverCarNumber = this.updateForm.deliverCarNumber || null;
        if (this.updateForm.deliverCarTime !== '0001-01-01T00:00:00' && this.updateForm.deliverCarTime !== null) {
          this.isTo = true;
          this.updateForm.goTo.push('deliver');
          this.updateForm.deliverCarTime = FormatDate(this.updateForm.deliverCarTime, 'yyyy-MM-dd HH:mm:ss');
        } else {
          this.updateForm.deliverCarTime = '';
        }
        if (this.updateForm.pickUpCarTime !== '0001-01-01T00:00:00' && this.updateForm.pickUpCarTime !== null) {
          this.isGo = true;
          this.updateForm.goTo.push('pickUp');
          this.updateForm.pickUpCarTime = FormatDate(this.updateForm.pickUpCarTime, 'yyyy-MM-dd HH:mm:ss');
        } else {
          this.updateForm.pickUpCarTime = '';
        }
      }
    },
    // 处理接送选择
    handlecheckbox(val) {
      this.isGo = val.some((item) => { return item === 'pickUp'; });
      this.isTo = val.some((item) => { return item === 'deliver'; });
      if (!this.isGo) {
        this.updateForm.pickUpCarTime = '';
        this.updateForm.pickUpCarNumber = null;
      }
      if (!this.isTo) {
        this.updateForm.deliverCarTime = '';
        this.updateForm.deliverCarNumber = null;
      }
    },
    close() {
      this.isTo = false;
      this.isGo = false;
      this.updateForm = {
        receptionName: '',
        receptionPhoneNumber: '',
        trainNumber: '',
        pickUpCarTime: '',
        pickUpCarNumber: 0,
        deliverCarTime: '',
        deliverCarNumber: 0,
        remark: '',
        goTo: []
      };
      this.$refs['form'].resetFields();
      this.dialogVisible = false;
    },
    submit() {
      var that = this;
      that.loading = true;
      that.$refs['form'].validate(valid => {
        if (valid) {
          that.updateForm.pickUpCarNumber = that.updateForm.pickUpCarNumber || 0;
          that.updateForm.deliverCarNumber = that.updateForm.deliverCarNumber || 0;
          if (that.code === 'order') {
            CopyData(that.updateForm, that.createForm);
            that.createForm.logisticEntryId = that.entryId;
            that.createForm.competitionId = this.$route.query.id;
            that.createForm.receptionModelOfCarId = that.car.id;
            that.createForm.pickUpCarNumber = that.createForm.pickUpCarNumber || 0;
            that.createForm.deliverCarNumber = that.createForm.deliverCarNumber || 0;
            api_POST_EventsManagementReceptionEntryReceptionEntry(that.createForm).then(res => {
              that.loading = false;
              if (res) {
                that.$message({ type: 'success', message: '预定成功！' });
                that.$parent.getOrderData();
              }
              that.close();
            }, (error) => {
              that.loading = false;
              that.$message({ type: 'error', message: error.error.message || '预定车辆失败！' });
            });
          } else {
            api_PUT_EventsManagementReceptionEntryReceptionEntryLogisticEntryId(that.entryId, that.updateForm).then(res => {
              that.loading = false;
              if (res) {
                that.$message({ type: 'success', message: '修改成功！' });
                that.$parent.getOrderData();
              }
              that.close();
            }, (error) => {
              that.loading = false;
              that.$message({ type: 'error', message: error.error.message || '修改失败！' });
            });
          }
        } else {
          that.loading = false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.dialog_form {
  padding: -9px 30px -20px 18px;
}
</style>
